<template>
    <div id="app">
        <!-- 登录框 -->
        <div class="login_item-1">
                <!-- VUE图片 -->
                <div class="login_img">
                    <img src="../assets/logo.png" alt="">
                </div>
                <!-- 登录表单 -->
                <el-form ref="loginfromRef" :rules="loginfromRules" :model="loginfrom" class="login_from">
                    <!-- 用户名     绑定用户名的验证规则-->
                    <el-form-item prop="username">
                        <el-input v-model="loginfrom.username" prefix-icon="iconfont icon-user"></el-input>
                    </el-form-item>
                    <!-- 密码       绑定密码的验证规则-->
                    <el-form-item prop="password">
                        <el-input v-model="loginfrom.password" prefix-icon="iconfont icon-lock_fill" type="password"></el-input>
                    </el-form-item>
                <!-- 按钮区域 -->
                    <el-form-item class="btn1">
                        <el-button type="primary" @click="login">登录</el-button>
                         <el-button type="info" @click="fromCz">重置</el-button>
                    </el-form-item>
                </el-form>
        </div>
    </div>
</template>
<script>
export default {
    name:"Login",
    data(){
        return{
            // 登录表单的数据绑定
            loginfrom:{
                username:"",
                password:""
            },
            // 表单验证信息
            loginfromRules:{
                // 用户名的合法验证
                username:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
                ],
                // 密码的合法验证
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                ]
            }  
        }
    },
    methods:{
        // 重置按钮
        fromCz(){
            // 当前的实例对象
            // console.log(this)
        // 给整个from表单绑定了这个属性  在api中有个清空表单的方法         
            this.$refs.loginfromRef.resetFields()
        },
        // 表单登录
         login(){
            this.$refs.loginfromRef.validate(async valid=>{
                // 符合规则返回true否则false
                // console.log(valid)
                if(!valid) return;
                  const {data:res}=await this.$axios.post("login",this.loginfrom)
                  if(res.meta.status !==200)
                      return this.$message.error("登陆失败")
                      this.$message.success("登录成功")
                    //   保存数据中的token到sessionStorage
                    window.sessionStorage.setItem("token",res.data.token)
                    //进行页面的跳转
                    this.$router.push("/shouye")
            })
        }
    }

}
</script>
<style lang="scss" scoped>
body,h1,h2,h3,h4,h5,h6,p{
  margin: 0;
  padding: 0;
  list-style: none;
}
body,html,#app{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
} 
#app{
    background: #2b4b6b;
}
.login_item-1{
    width: 450px;
    height: 300px;
    background: #fff;
    border-radius: 3px;
    // 居中定位
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.login_img{
    width: 130px;
    height: 130px;
    border:1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;;
    }
  
}
.login_from{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
}
.btn1{
    display: flex;
    justify-content: flex-end;
}

</style>